<script setup>
  import { ref, onMounted } from 'vue'

  import taskApi from '@/apis/task'

  // 任务列表数据
  const pickUpList = ref([])
  // 下一页页码
  const nextPage = ref(1)
  // 每页包含数据条数
  const pageSize = ref(5)
  // 是否为空列表
  const isEmpty = ref(false)
  //是否在加载中
  const isRefresh = ref(false)
  //是否有更多数据
  const hasMore = ref(true)

  // 生命周期（也可以用其它的生命周期）
  onMounted(() => {
    getPickUpList()
  })

  //下拉刷新
  const onScrollViewRefresh = async () => {
    isRefresh.value = true
    await getPickUpList()
    isRefresh.value = false
  }
  //上拉加载
  const onScrollToLower = () => {
    if (!hasMore.value) return
    getPickUpList(nextPage.value)
  }

  // 获取任务列表
  async function getPickUpList(page = 1, pageSize = 5) {
    const data = await taskApi.list(1, page, pageSize)
    // 渲染任务列表
    // pickUpList.value = data.items || []
    //如果page===1，
    if (page === 1) pickUpList.value = []
    pickUpList.value = [...pickUpList.value, ...(data.items || [])]
    //页码加1
    nextPage.value = ++data.page
    // 判断还有没有更多的数据
    hasMore.value = nextPage.value <= data.pages
    // 判断列表是否为空
    isEmpty.value = pickUpList.value.length === 0
  }
</script>

<template>
  <scroll-view
    scroll-y
    refresher-enabled
    class="scroll-view"
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onScrollViewRefresh"
    :refresher-triggered="isRefresh"
  >
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="pickup in pickUpList" :key="pickup.id">
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${pickup.id}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ pickup.transportTaskId }}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ pickup.startAddress }}</view>
              <view class="line">{{ pickup.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ pickup.planDepartureTime }}</view>
          <navigator
            v-if="pickup.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${pickup.id}`"
            class="action"
          >
            提货
          </navigator>
          <navigator v-else hover-class="none" url=" " class="action" disabled>
            提货
          </navigator>
        </view>
      </view>

      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
